<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="author" content="王晨阳">
        <title>宝钢</title>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="baogang.css">
    </head>
    <body>
        <!--1.导航条-->
        <nav class="navbar navbar-default navbar-fixed-top my-navbar">
            <div class="container">
                <!--logo+菜单键-->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#my-navbar-collapse" aria-expanded="false">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">
                        <img src="image/logo.png" alt="logo">
                    </a>
                </div>

                <!--nav-items-->
                <div class="collapse navbar-collapse navbar-left" id="my-navbar-collapse">
                    <ul class="nav navbar-nav">
                      <li><a href="#">首页</a></li>
                      <li><a href="#">媒体中心</a></li>
                      <li><a href="#">关于我们</a></li>
                      <li><a href="#">业务板块</a></li>
                      <li><a href="#">产品服务</a></li>
                    </ul>
                </div>

                <!--输入框-->
                <form class="navbar-form navbar-right visible-lg-block visible-md-block">
                    <div class="form-group">
                      <input type="text" class="form-control" placeholder="Search">
                    </div>
                </form>
            </div><!--.container-->
        </nav>

        <!--2.banner-->
        <div class="banner"></div>

        <!--3.内容-->
        <div class="container content-box">
            <!--3-1. 公司动态-->
            <div class="dongtai col-md-4 col-sm-12">
                <h2>公司动态</h2>
                <div class="content">
                    <div class="top">
                        <img src="image/news.png" alt="新闻">
                        <section>
                            <h3>Bootstrap</h3>
                            <p>今天我们在做宝钢的首页，使用了bootstrap中组件中的导航条内容和栅格系统。</p>
                            <a class="more" href="#">READMORE&gt;&gt;</a>
                        </section>
                    </div>

                    <div class="bottom">
                        <ul>
                            <li><a href="#">HTML5</a><span>2017-3-6</span></li>
                            <li><a href="#">CSS3</a><span>2017-3-6</span></li>
                            <li><a href="#">JavaScript</a><span>2017-3-6</span></li>
                        </ul>
                    </div>
                </div>
            </div>

            <!--3-2. 研究与观点-->
            <div class="idea col-md-4 col-sm-12">
                <h2>研究与观点</h2>
                <div class="content">
                    <div class="top">
                        <h3>HTML5</h3>
                        <p>HTML5是html的第五个版本，HTML5是html的第五个版本，HTML5是html的第五个版本，HTML5是html的第五个版本。</p>
                        <a href="#" class="more">READMORE&gt;&gt;</a>
                    </div>
                    <div class="bottom">
                        <h3>HTML5</h3>
                        <p>HTML5是html的第五个版本，HTML5是html的第五个版本，HTML5是html的第五个版本，HTML5是html的第五个版本。</p>
                        <a href="#" class="more">READMORE&gt;&gt;</a>
                    </div>
                </div>
            </div>

            <!--3-3. 产品与服务-->
            <div class="servse col-md-4 col-sm-12">
                <h2>产品与服务</h2>
                <div class="content">
                    <img src="image/service.png" alt="服务">
                    <div class="options">
                        <a href="#">&gt;HTML5</a>
                        <a href="#">&gt;CSS3</a>
                        <a href="#">&gt;JavaScript</a>
                        <a href="#">&gt;jQuery</a>
                    </div>
                </div>
            </div>

        </div>

        <!--4.footer,页脚区域-->
        <footer class="navbar navbar-default navbar-fixed-bottom">
            <div class="container">
                <p class="navbar-left">Copyright &copy;智游教育</p>
                <ul class="navbar-right">
                    <li class="pull-left"><a href="#">网站地图</a></li>
                    <li class="pull-left"><a href="#">关于宝钢</a></li>
                    <li class="pull-left"><a href="#">关于宝钢</a></li>
                    <li class="pull-left"><a href="#">工作机会</a></li>
                    <li class="pull-left"><a href="#">法律声明</a></li>
                    <li class="pull-left"><a href="#">友情链接</a></li>
                </ul>
            </div>
        </footer>


        <script src="bootstrap/js/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>